<script setup>
import { defineProps, defineEmits, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
const props = defineProps({
	dialogVisible: Boolean
})
const dialogVisibles = ref(props.dialogVisible)
const emits = defineEmits(['changeDialogVisible'])
const closeModel = () => {
	emits('changeDialogVisible', false)
	console.log(data)
}
const getKey = (prefix, id) => {
	return `${prefix}-${id}`
}
const createData = (maxDeep, maxChildren, minNodesNumber, deep = 1, key = 'node') => {
	let id = 0
	return Array.from({ length: minNodesNumber })
		.fill(deep)
		.map(() => {
			const childrenNumber = deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren)
			const nodeKey = getKey(key, ++id)
			return {
				id: nodeKey,
				label: nodeKey,
				children: childrenNumber ? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey) : undefined
			}
		})
}
const checkList = ref([])
const query = ref('')
const treeRef = ref()
const data = ref([
	{
		id: 'node-1',
		label: '东风文化传媒有限公司',
		level: 1,
		total: 4,
		now: 4,
		ischeck: false,
		children: [
			{
				id: 'node-1-1',
				label: 'node-1-1',
				level: 2,
				children: [
					{
						id: 'node-1-1-1',
						label: '张磊',
						path: 'https://mpa.oss-cn-hangzhou.aliyuncs.com/weiban-prod/default-avatar.png',
						level: 3
					}
				]
			}
		]
	},
	{
		id: 'node-3',
		label: '王五',
		children: [],
		path: 'https://mpa.oss-cn-hangzhou.aliyuncs.com/weiban-prod/default-avatar.png',
		level: 3
	}
])

const treeProps = {
	value: 'id',
	label: 'label',
	children: 'children'
}
const onQueryChanged = (query) => {
	// TODO: fix typing when refactor tree-v2
	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
	// @ts-expect-error
	treeRef.value.filter(query)
}
const filterMethod = (query, node) => {
	return node.label.includes(query)
}
</script>
<template>
	<el-dialog class="customer-dialog" v-model="dialogVisibles" width="40%" @close="closeModel">
		<template #header="{ close, titleId, titleClass }">
			<div class="my-header">
				<h4 style="text-align: center">选择群主</h4>
			</div>
		</template>
		<div class="dialog-content">
			<div class="dialog-header">
				<el-icon><BellFilled /></el-icon>
				<span class="gray">仅展示已激活互通账号且配置基础席位的员工</span>
				<a href=""> 去配置</a>
			</div>
			<!-- 树形组件区域 -->
			<div class="dialog-tree">
				<div class="tree-left">
					<el-input
						class="tree-input"
						v-model="query"
						placeholder="可搜索成员、部门"
						:suffix-icon="Search"
						@input="onQueryChanged"
					/>
					<p class="tree-total">全部群主(4)</p>
					<el-tree-v2 ref="treeRef" :data="data" :props="treeProps" :filter-method="filterMethod" :height="321">
						<template #default="{ node, data }">
							<!-- 一级目录树 -->
							<div v-if="data.level === 1" class="tree-levelone">
								<div class="tree-levelone-left">
									<MyIcon class="tree-levelone-file" name="File" />
									<el-tooltip placement="top" effect="light">
										<template #content>
											<span class="tree-levelone-tooltip">{{ node.label }}</span>
										</template>
										<span class="tree-levelone-label">{{ node.label }}</span>
									</el-tooltip>
									<span class="tree-levelone-num" v-if="data.now">({{ data.now }}/{{ data.total }})</span>
								</div>
								<el-checkbox v-model="data.ischeck" size="large" />
							</div>
							<!-- 二级目录树 -->

							<div v-if="data.level === 2" class="tree-levelone">
								<span class="tree-levelone-label">展开群主</span>
							</div>
							<!-- 三级目录树 -->
							<div v-if="data.level === 3" class="tree-levelone" style="margin-top: 32px">
								<div class="tree-levelone-left">
									<img class="tree-levelone-img" :src="data.path" alt="" />
									<span class="tree-levelone-label">{{ node.label }}</span>
								</div>
								<el-checkbox v-model="data.ischeck" size="large" />
							</div>
						</template>
					</el-tree-v2>
				</div>
				<div class="tree-right">
					<div class="tree-right-header">
						已选：({{ checkList.length }})
						<a>全部清空</a>
					</div>
				</div>
			</div>
		</div>
		<template #footer>
			<div class="footer-btn">
				<div><span class="gray">没有想要添加的成员？</span> <a href="">添加成员教程</a></div>
				<div>
					<el-button @click="closeModel">取消</el-button>
					<el-button type="primary" @click="closeModel">确定</el-button>
				</div>
			</div>
		</template>
	</el-dialog>
</template>

<style lang="scss" scoped>
.tree-levelone-tooltip {
	font-size: 14px;
	color: #5f5e5e;
	margin: 10px;
}
.tree-levelone-img {
	width: 40px;
	height: 40px;
	margin-right: 10px;
}
// :deep(.el-tree-node__content) {
// 	height: 40px;
// }
:deep(.el-tree-node__expand-icon) {
	margin-left: -8px;
}
:deep(.el-tree-node__content:hover) {
	background-color: #fff;
}
:deep(.customer-dialog .el-dialog__header) {
	border: none;
}
a {
	color: #1890ff;
	text-decoration: none;
	cursor: pointer;
}
.gray {
	color: #595959;
	margin: 0 8px;
	font-size: 14px;
}
.dialog-footer button:first-child {
	margin-right: 10px;
}
.dialog-content {
	width: 100%;
	.dialog-header {
		display: flex;
		align-items: center;
		width: 100%;
		margin-top: -20px;
		padding: 8px 16px;
		background-color: #f1f9ff;
		color: #1890ff;
	}
	.dialog-tree {
		display: flex;
		width: 100%;
		height: 397px;
		padding-top: 16px;
		.tree-left,
		.tree-right {
			width: 50%;
			height: 100%;
		}
		.tree-left {
			width: 90%;
			font-size: 14px;
			.tree-total {
				font-size: 13px;
				margin: 8px 0;
				color: #8c8c8c;
			}
			.tree-levelone {
				width: 82%;

				:deep(.el-checkbox.el-checkbox--large .el-checkbox__inner) {
					width: 14px;
					height: 14px;
					border-radius: 50%;
				}
			}
			.tree-levelone,
			.tree-levelone-left {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.tree-levelone-file {
					font-size: 24px;
					color: #1890ff;
				}
				.tree-levelone-label {
					color: #262626;
					margin: 0 8px 0 5px;
				}
				.tree-levelone-num {
					font-size: 13px;
					color: #bfbfbf;
				}
			}
		}
		.tree-left .tree-input {
			width: 90%;
			height: 35px;
		}
		.tree-right {
			border-left: 1px solid #ccc;
			.tree-right-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 35px;
			}
		}
	}
}
.footer-btn {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
</style>
